<template>
  <m-box title="仓库管理" class="warehouse-management">
    <ul class="w-row">
      <li class="w-item">
        <div class="w-item__title">物料种类</div>
        <div class="w-item__content">
          <m-digital :number="mitemQty" color="#7FFF00" />
          <dv-decoration-2 :dur="20" uom="种" :style="{ width: `${setNumWidth(mitemQty)}px` }" />
        </div>
      </li>
      <li class="w-item">
        <div class="w-item__title">成品库存（成品仓）</div>
        <div class="w-item__content">
          <m-digital :number="finishedProductQty" color="#BA55D3" />
          <dv-decoration-2 :dur="20" :style="{ width: `${setNumWidth(finishedProductQty)}px` }" />
        </div>
      </li>
    </ul>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { numberFormat } from '@/utils/tools'
import { onMounted } from 'vue'

const mitemQty = ref(0)
const finishedProductQty = ref(0)

const setNumWidth = (num) => {
  const val = numberFormat(num)
  return (String(val).length * 42) / 1.5
}

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/getWMSReport')
    mitemQty.value = res.mitemQty
    finishedProductQty.value = res.finishedProductQty
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.warehouse-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 100%;
          padding: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .w-item {
            vertical-align: baseline;
            margin-bottom: 20px;
            .w-item__title {
              display: inline-block;
              font-size: 20px;
              font-weight: 700;
              color: rgb(24, 186, 214);
              padding: 0 10px;
              line-height: 40px;
              border: 2px dotted rgb(63, 150, 165);
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              .m-digital {
                min-width: 100px;
                padding-bottom: 0;
                padding-left: 16px;
              }
              .dv-decoration-2 {
                position: absolute;
                height: 2px;
                bottom: -9px;
              }
            }
          }
          .w-item:nth-child(2) {
            // text-align: right;
            padding-left: 3em;
          }
        }
      }
    }
  }
}
</style>
